@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

// 加载状态
.page-loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	@include flex-center;
	background: rgba(255, 255, 255, 0.9);
	z-index: $z-index-modal;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

// 帖子容器
.post-container {
	padding: $spacing-lg;
	background: $bg-card;
	padding-bottom: 120rpx;

	// 作者信息
	.post-header {
		display: flex;
		margin-bottom: $spacing-lg;

		.author-info {
			display: flex;
			flex-direction: column;
			width: -webkit-fill-available;
			margin-left: $spacing-base;

			.author-name {
				font-size: $font-xl;
				font-weight: $font-semibold;
				color: $text-primary;
				margin-bottom: $spacing-xs;
			}

			.post-time {
				font-size: $font-xs;
				color: $text-tertiary;
			}
		}

		// 关注按钮
		.u-button {
			font-size: $font-sm;
			border-radius: $radius-round;
			background: $primary-color;
			color: #fff;
		}
	}
}

// 帖子内容
.post-content {
	margin-bottom: $spacing-lg;

	.post-title {
		font-size: $font-lg;
		font-weight: $font-semibold;
		color: $text-primary;
		line-height: $line-height-tight;
		margin-bottom: $spacing-base;
		display: block;
	}

	.post-desc {
		font-size: $font-base;
		color: $text-secondary;
		line-height: $line-height-base;
		margin-bottom: $spacing-lg;
		display: block;
	}

	// 多图样式
	.up-album {
		uni-image {
			width: 100%;
			height: 100%;
			margin-bottom: $spacing-sm;
			border-radius: $radius-sm;
		}
	}
}

// 交易信息
.trade-info {
	background: linear-gradient(135deg, rgba(237, 137, 54, 0.05) 0%, rgba(237, 137, 54, 0.02) 100%);
	padding: $spacing-lg;
	margin-bottom: $spacing-lg;
	border-radius: $radius-md;
	border-left: 4px solid $plate-trade;

	.trade-title {
		font-size: $font-base;
		font-weight: $font-semibold;
		color: $text-primary;
		margin-bottom: $spacing-base;
		display: flex;
		align-items: center;
		gap: $spacing-xs;
	}

	.trade-item {
		@include flex-between;
		padding: $spacing-sm 0;
		border-bottom: 1px solid $border-light;

		&:last-child {
			border-bottom: none;
		}

		.label {
			font-size: $font-sm;
			color: $text-tertiary;
		}

		.value {
			font-size: $font-base;
			font-weight: $font-medium;
			color: $text-primary;
		}

		.price {
			font-size: $font-xl;
			font-weight: $font-bold;
			color: $error-color;
		}
	}
}

// 求助信息
.help-info {
	background: linear-gradient(135deg, rgba(159, 122, 234, 0.05) 0%, rgba(159, 122, 234, 0.02) 100%);
	padding: $spacing-lg;
	margin-bottom: $spacing-lg;
	border-radius: $radius-md;
	border-left: 4px solid $plate-help;

	.help-title {
		font-size: $font-base;
		font-weight: $font-semibold;
		color: $text-primary;
		margin-bottom: $spacing-base;
		display: flex;
		align-items: center;
		gap: $spacing-xs;
	}

	.help-item {
		@include flex-between;
		padding: $spacing-sm 0;
		border-bottom: 1px solid $border-light;

		&:last-child {
			border-bottom: none;
		}

		.label {
			font-size: $font-sm;
			color: $text-tertiary;
		}

		.value {
			font-size: $font-base;
			font-weight: $font-medium;
			color: $text-primary;
		}
	}
}

// 附件下载
.attachments {
	background: $bg-page;
	padding: $spacing-lg;
	margin-bottom: $spacing-lg;
	border-radius: $radius-md;

	.attachments-title {
		font-size: $font-base;
		font-weight: $font-semibold;
		color: $text-primary;
		margin-bottom: $spacing-base;
		display: flex;
		align-items: center;
		gap: $spacing-xs;
	}

	.attachment-item {
		@include flex-between;
		padding: $spacing-base;
		background: $bg-card;
		margin-bottom: $spacing-sm;
		border-radius: $radius-sm;
		box-shadow: $shadow-sm;

		&:last-child {
			margin-bottom: 0;
		}

		.file-info {
			display: flex;
			align-items: center;
			gap: $spacing-sm;

			.file-name {
				font-size: $font-sm;
				color: $text-primary;
			}

			.file-size {
				font-size: $font-xs;
				color: $text-tertiary;
			}
		}
	}
}

// 操作按钮
.post-actions {
	@include flex-center;
	justify-content: space-around;
	padding: $spacing-base 0;
	border-top: 1px solid $border-light;
	border-bottom: 1px solid $border-light;

	.action-item {
		@include flex-center;
		flex-direction: column;
		gap: $spacing-xs;
		transition: transform $transition-fast;

		&:active {
			transform: scale(0.95);
		}

		.action-text {
			font-size: $font-xs;
			color: $text-secondary;
		}
	}
}

// 评论区
.comments-section {
	margin-top: $spacing-lg;

	.comments-title {
		font-size: $font-lg;
		font-weight: $font-semibold;
		color: $text-primary;
		margin-bottom: $spacing-base;
		padding-bottom: $spacing-base;
		border-bottom: 2px solid $border-light;
	}

	.comment-item {
		padding: $spacing-base 0;
		border-bottom: 1px solid $border-light;

		&:last-child {
			border-bottom: none;
		}

		.comment-header {
			display: flex;
			align-items: center;
			margin-bottom: $spacing-sm;

			.comment-author {
				flex: 1;
				margin-left: $spacing-sm;

				.author-name {
					font-size: $font-sm;
					color: $text-primary;
					font-weight: $font-medium;
				}

				.comment-time {
					font-size: $font-xs;
					color: $text-tertiary;
				}
			}
		}

		.comment-content {
			font-size: $font-sm;
			color: $text-secondary;
			line-height: $line-height-base;
			margin-left: 52rpx;
		}
	}
}

// 导航栏右侧图标
.nav-right-icon {
	margin-right: $spacing-base;
}

// 底部输入栏
.bottom-input-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: $bg-card;
	padding: $spacing-base $spacing-lg;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	z-index: $z-index-fixed;
	@include flex-between;
	gap: $spacing-base;

	.input-wrapper {
		flex: 1;
		background: $bg-page;
		border-radius: $radius-round;
		padding: $spacing-sm $spacing-lg;

		.input-field {
			font-size: $font-sm;
			color: $text-primary;
		}
	}

	.send-btn {
		background: $primary-color;
		color: #fff;
		padding: $spacing-sm $spacing-lg;
		border-radius: $radius-round;
		font-size: $font-sm;
		font-weight: $font-medium;
	}
}
